<template>
    <view class="container">
        <view class="canvas_box">
            <view class="clear" @click="handleClearSign">
                <image style="vertical-align: middle; width: 16rpx;height: 16rpx;"
                    src="../../assets/images/orderTracking/reset.png"></image>
                清除重签
            </view>
            <view class="canvas_tips">
                签名区域
            </view>
            <canvas canvas-id="canvas_id" class="canvas_content" disable-scroll="true" @touchstart="touchStart"
                @touchmove="touchMove" @touchend="touchEnd" @touchcancel="touchEnd" @error="canvasIdErrorCallback"></canvas>
        </view>
        <view class="bottom_view">
            <view class="view_tips">
                <view> 确认签收及代表货物已完好无损交付，</view>
                <view>请您在上方“签名区域”处签名，并保持字迹清晰。</view>

            </view>
            <view class="view_btns">
                <view class="btns_clear" @click="handleCancel">
                    取消签名
                </view>
                <view class="btns_config" @click="handleSubmitSign">
                    确认签收
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { defineComponent, getCurrentInstance, reactive, ref, onMounted } from 'vue';
import Taro from "@tarojs/taro";
// screen_bottom: getApp().globalData.screenBottom + 'px',//这里缓存了手机底部栏高度
const beginDraw = ref(false) //开始绘画
const startX = ref(0)//屏幕点x坐标
const startY = ref(0)//屏幕点y坐标

let context

onMounted(() => {
    context = Taro.createCanvasContext('canvas_id')
    context.setLineWidth(4)//设置线宽
    context.setLineCap('round')//设置线末端样式
    context.setLineJoin('round')//设置线条的结束交点样式

})
function canvasIdErrorCallback() { }
//清除签名
function handleClearSign() {
    context.draw() //true 接着上次的继续画图，false 取消上次的画图 默认值
    context.setLineWidth(4)
    context.setLineCap('round')
    context.setLineJoin('round')
}
//提交签名
function handleSubmitSign() {
    if (startX.value == 0) {
        Taro.showToast({
            title: '请书写签名',
            icon: 'none'
        })
        return
    }
    Taro.canvasToTempFilePath({
        canvasId: 'canvas_id',
        success: (res) => {
            getImageInfo(res.tempFilePath)
        },
        fail: () => {
            Taro.showToast({
                title: '保存报错，请稍后重试',
                icon: 'none'
            })
        }
    })
}
//获取图片信息上传图片
function getImageInfo(fileUrl) {
  let base64 = (Taro.getFileSystemManager().readFileSync(fileUrl, 'base64') as string).replace(/\s/g, '')
  if(base64){
    let pages = Taro.getCurrentPages()
    let prevPage = pages[pages.length - 2]
    prevPage.setData({base64})
    Taro.navigateBack()
  }
  else{
    canvasErrorBack()
  }
}
//开始
function touchStart(e) {
    lineBegin(e.touches[0].x, e.touches[0].y)
}
// 移动
function touchMove(e) {
    if (beginDraw.value) {
        addPointInLine(e.touches[0].x, e.touches[0].y)
        context.draw(true) //true 本次绘制接着上一次绘制  false 清除上次绘制
    }
}
//结束
function touchEnd() {
    lineEnd()
}
//错误返回
function canvasErrorBack() {
    Taro.showToast({
        title: '签名失败，请稍后重试',
        icon: 'none'
    })
}
//开始划线
function lineBegin(x, y) {
    beginDraw.value = true
    context.beginPath()
    startX.value = x;
    startY.value = y
    addPointInLine(x, y)
}
//增加点
function addPointInLine(x, y) {
    context.moveTo(startX.value, startY.value);
    context.lineTo(x, y);
    context.stroke() //划弧线
    startX.value = x
    startY.value = y
}
function lineEnd() {
    context.closePath() //关闭当前路径
    beginDraw.value = false
}

function handleCancel() {
  let pages = Taro.getCurrentPages()
  let prevPage = pages[pages.length - 2]
  prevPage.setData({base64:''})
  Taro.navigateBack()
}


</script>

<style lang="scss" >
// @import "xxx";
// @import url(xxx);

.container {
    background-color: #F6F7F8;
    height: calc(100vh - 32rpx);
    padding: 16rpx 30rpx;
}

.canvas_box {
    width: 100%;
    height: calc(100% - 54px);
    background-color: #E8E9EC;
    position: relative;

    .clear {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        z-index: 99;
        color: #999999;
        font-size: 14px;


    }

    .canvas_tips {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        font-size: 80px;
        color: #E2E2E2;
        // background-color: #006AFF;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .canvas_content {
        width: 100%;
        height: 100%;
    }
}

.bottom_view {
    width: 100%;
    margin-top: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .view_tips {
        color: #363A44;
        font-size: 12rpx;
    }

    .view_btns {
        display: flex;
        align-items: center;
        font-size: 14px;

        .btns_clear {
            height: 36px;
            padding: 0 36px;
            text-align: center;
            line-height: 36px;
            color: #666666;
            border: 1rpx solid #C4C4C4;
            border-radius: 10px;
        }

        .btns_config {
            height: 36px;
            padding: 0 36px;
            text-align: center;
            line-height: 36px;
            color: #ffffff;
            background-color: #006AFF;
            border-radius: 10px;
            margin-left: 8px;
        }
    }
}
</style>
